<template>
  <a-layout>
    <a-layout-content ref='content'>
      <div>
        <div style='display: flex;width: 100%;justify-content: space-between;background: white;align-items: center;border-bottom: 1px solid #e7e7e7;'>
          <a-menu v-model='current' mode='horizontal'>
            <a-menu-item key='add'>立项管理</a-menu-item>
            <a-menu-item key='archives'>档案信息</a-menu-item>
          </a-menu>
          <a-button type='primary' @click='showRightBar=true' v-if='!showRightBar' style='margin-right: 8px;'>流程进度</a-button>
        </div>
        <div class='table-page-search-wrapper'>
          <div v-if="current[0] === 'archives'">
            <Archives :detail='data' ref='archives'></Archives>
          </div>
          <div v-if="current[0] === 'add'">
            <projectManagement ref='add' />
          </div>
        </div>
      </div>
      <footer-tool-bar>
        <template #extra>
          <span>{{ saveInfo }}</span>
        </template>
        <a-space>
          <a-button style='margin-right: auto;' @click='cancel' :loading='loading'>取消</a-button>
          <a-button type='primary' @click='save' :loading='loading'>保存</a-button>
          <a-button type='primary' @click='validate' :loading='loading'>提交</a-button>
        </a-space>
      </footer-tool-bar>
    </a-layout-content>
    <a-layout-sider width='300px !important' theme='light' class='custom-right-bar'
                    v-if='showRightBar'
                    :style="{ height: windowHeight, backgroundColor: '#fff', boxShadow: '5px 5px 5px 5px rgba(0.1, 0.1, 0.1, 0.1)' }">
      <div class='table-header'>
<!--        <span class='table-header__title'>流程进度</span>-->
        <CardTitle text='流程进度'></CardTitle>
        <a-button type='primary' @click='showRightBar=false'>收起</a-button>
      </div>
      <div v-for='(item, index) in progressList' :key='index' style='padding: 0 10px 10px 10px;'>
        <div class='table-header__progress'>
          <div class='table-header__btn'>{{ item.name }}</div>
        </div>
        <div class='table-header__info'>
          <div style='background: #1890FF;border-radius: 50%;width:10px;height:10px'></div>
          <div style='margin: 0 5px'>{{ item.msg }}</div>
        </div>
        <!-- <div class="table-header__msg"> 项目类型： {{ item.projectMsg.type }}</div> -->
        <a-row :gutter='24'>
          <a-col :md='1' :sm='6'></a-col>
          <a-col :md='10' :sm='12'>项目类型：</a-col>
          <a-col :md='8' :sm='12'>{{ item.projectMsg.type }}</a-col>
        </a-row>
        <a-row :gutter='24'>
          <a-col :md='1' :sm='6'></a-col>
          <a-col :md='10' :sm='12'>发起人：</a-col>
          <a-col :md='8' :sm='12'>{{ item.projectMsg.sponsor }}</a-col>
        </a-row>
        <a-row :gutter='24'>
          <a-col :md='1' :sm='6'></a-col>
          <a-col :md='10' :sm='12'>承担单位：</a-col>
          <a-col :md='12' :sm='12'>{{ item.projectMsg.unit }}</a-col>
        </a-row>
        <a-row :gutter='24'>
          <a-col :md='1' :sm='6'></a-col>
          <a-col :md='10' :sm='12'>发起时间：</a-col>
          <a-col :md='12' :sm='12'>{{ item.projectMsg.time }}</a-col>
        </a-row>
        <a-row :gutter='24'>
          <a-col :md='1' :sm='6'></a-col>
          <a-col :md='10' :sm='12'>项目编号：</a-col>
          <a-col :md='12' :sm='12'>{{ item.projectMsg.no }}</a-col>
        </a-row>
        <!-- <div class="table-header__msg"> 发起人： {{ item.projectMsg.sponsor }}</div> -->
        <!-- <div class="table-header__msg"> 发起时间： {{ item.projectMsg.time }}</div>
          <div class="table-header__msg"> 项目编号： {{ item.projectMsg.no }}</div>\ -->
      </div>
    </a-layout-sider>
  </a-layout>
</template>

<script>
import Archives from './Archives.vue'
import projectManagement from './projectManagement'
import FooterToolBar from '@/components/FooterToolbar'
import { detail, update, addProject } from '@/api/projectInitApply'
import notification from 'ant-design-vue/es/notification'
import CardTitle from '@/views/project/components/CardTitle.vue'

export default {
  components: {
    CardTitle,
    Archives,
    FooterToolBar,
    projectManagement
  },
  data() {
    return {
      showRightBar: true,
      current: ['add'],
      data: {
        projectName: '',
        unit: '',
        projectSource: '',
        manager: '',
        cycleTime: [new Date(), new Date()]

      },
      loading: false,
      saveInfo: null,
      windowHeight: null,
      progressList: [
        {
          name: '当前流程',
          msg: '基础信息-已完成',
          projectMsg: {
            type: '延续项目',
            sponsor: '张继科',
            unit: 'xx能源发展有限公司采油服务分公司/科技信息部',
            time: '2023-07-09',
            no: 'XM3845756'
          }
        },
        {
          name: '下一步流程',
          msg: '预算信息-已完成',
          projectMsg: {
            type: '延续项目',
            sponsor: '张继科',
            unit: 'xx能源发展有限公司采油服务分公司/科技信息部',
            time: '2023-07-09',
            no: 'XM3845756'
          }
        }
      ]
    }
  },
  watch: {},
  methods: {
    formatDateString(inputDateString) {
      const inputDate = new Date(inputDateString)

      // 获取年、月、日
      const year = inputDate.getFullYear()
      const month = String(inputDate.getMonth() + 1).padStart(2, '0') // 月份从0开始，需要加1
      const day = String(inputDate.getDate()).padStart(2, '0')

      // 拼接成规范的日期格式
      const formattedDate = `${year}-${month}-${day}`

      return formattedDate
    },
    validate() {
      if (this.current[0] == 'archives') {
        let data = localStorage.getItem('basicInfo')
        if (!data || !Object.keys(data).length) {
          notification.error({
            message: '错误',
            description: '请先填写并保存基础信息！'
          })
        }
        const fileId = this.$refs.archives.fileId
        if (fileId) {
          // TODO 接口
        }
      } else {
        if (this.$refs.add.getCurrentTab() === 0) {
          this.$refs.add.getData()
        } else if (this.$refs.add.getCurrentTab() === 1) {
          this.$refs.add.getData2()
        } else if (this.$refs.add.getCurrentTab() === 2) {
          this.$refs.add.getData3()
        } else if (this.$refs.add.getCurrentTab() === 3) {
          this.$refs.add.getData4()
        } else {
          this.data.cycleStart = this.formatDateString(this.data.cycleTime[0])
          this.data.cycleEnd = this.formatDateString(this.data.cycleTime[1])
          delete this.data.cycleTime
          if (this.data.id) {
            update(this.data).then(res => {
              console.log(res)
              this.getById()
            })
          } else {
            addProject(this.data).then(res => {
              console.log(res)
              this.$router.push({ path: '/initManage' })
            })
          }
          console.log(this.data)
        }
      }
    },
    save() {
      this.validate()
      this.saveInfo = '已保存草稿'
    },
    cancel() {
      this.$router.push({
        path: '/initManage'
      })
    },
    getWindowHeight() {
      return this.$refs.content.scrollHeight || 0
    },
    parseDate(dateString) {
      return dateString ? new Date(dateString) : null
    },
    formattedCycleTime(detail) {
      if (!detail.cycleTime) {
        return null
      }
      const [startDate, endDate] = detail.cycleTime.split('~')
      console.log(detail.cycleTime.split('~'))
      return [startDate, endDate]
    },
    getById() {
      const id = this.$route.query.id
      // let id = '1742369449645895682'
      if (id) {
        detail({ id: id }).then(res => {
          res.cycleTime = res.cycleStart + '~' + res.cycleEnd
          this.data = res
          this.data.cycleTime = this.formattedCycleTime(res)
          console.log(333, this.data)
        })
      }

    }
  },

  mounted() {
    console.log('2024-1-7 01:21:36')
    this.$nextTick(() => {
      console.log(this.$refs.page)
      this.windowHeight = this.getWindowHeight() + 'px'
      console.log(this.windowHeight)

    })
  },
  created() {
    localStorage.removeItem('basicInfo')
    localStorage.removeItem('currentPageNum')
    const query = this.$route.query
    if (query.mode) {
      // 新增
    } else {
      this.getById()
    }
  }
}
</script>

<style scoped lang='less'>
::v-deep .ant-breadcrumb {
  margin: 30px 0 0 10px;
}

.table-header {
  border-left: solid 2px #1890FF;
  padding-left: 8px;
  margin: 16px 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  &__title {
    font-size: 14px;
    line-height: 1em;
  }

  &__btn {
    border-radius: 10px 10px 1px 1px;
    background: #1890FF;
    color: #fff;
    width: 30%;
    text-align: center;
    // margin: 0 0 13px 0;
  }

  &__progress {
    border-bottom: 2px solid #1890FF;
    margin-top: 20px;
  }

  &__info {
    margin: 10px 0 10px 0px;
    display: flex;
    align-items: center;
    border-bottom: 1px dashed #808080;
  }

}

::v-deep .ant-layout-footer {
  padding: 0 0 10px 0;
}
</style>
<style>
.ant-pro-global-footer {
  margin: 8px 1px 40px 0
}
</style>
